<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta content="width=device-width,initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
	<meta name="apple-mobile-web-app-capable" content="no" />
	<title>统采商城</title>
	<link rel="stylesheet" href="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/wechat/frame/mui/css/mui.min.css">
	<link rel="stylesheet" type="text/css" href="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/wechat/frame/sui/Font/iconfont.css">
	<link href="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/wechat/css/dropload.css" rel="stylesheet" />
	<style type="text/css">
		body {
			margin: 8px;
			background-color: white;
			line-height: inherit;
		}
		.news-wrap {
			display: flex;
			width: 100%;
			overflow: hidden;
			margin-bottom: 8px;
			padding-bottom: 3px;
			border-bottom: 1px solid #f5f7f9;
		}
		.news-content {
			flex: 1 0 auto;
			display: flex;
			flex-direction: column;
			width: 100%;
		}
		.news-intr {
			width: 100%;
			font-size: 0;
			overflow: hidden;
			margin-bottom: 1px;
		}
		.news-intr h2 {
			width: 100%;
			margin: 0 0 5px;
			font-weight: 500;
			font-size: 16px;
			word-break: break-all;
		}
		.news-intr span {
			width: 100%;
			font-size: 12px;
			color: #999;
			word-break: break-all;
		}
		.news-imgs {
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			margin: 2px -5px 2px 0;
		}
		.news-imgs div {
			position: relative;
			overflow: hidden;
			flex: 0 0 30%;			
			margin-right: 2%;
			padding-top: 30%;
			border: 1px solid #eee;
		}
		.news-imgs img {
			position: absolute;
			top: 0;
			left: 0;
			bottom: 0;
			width: 100%;
			margin: auto;
		}	
		.news-addtime {
			display: flex;
			justify-content: space-between;
			margin-top: 2px;
			color: #999;
			font-size: 12px;
		}
	</style>
 </head>
 <body>
 	{{range .news}}
 	<div class="news-wrap goto" href="/mobile/index/news_content?id={{.id}}">
 		<div class="news-content">
	 		<div class="news-intr">
	 			<h2>{{.title}}</h2>
	 			<span>{{.intr}}</span>
	 		</div>
	 		{{if .pathname}}
	 		<div class="news-imgs">
	 			{{range $i, $v := .pathname}}
	 			<div>
	 				<img src="{{$v}}">
	 			</div>
	 			{{end}}
	 		</div>
	 		{{end}}
			<div class="news-addtime">
				<span>{{.addtime}}</span>
				<span><i style="vertical-align: middle;" class="iconfont">&#xe6e7;</i>{{.click}}</span>
			</div>
		</div>
	</div>
	{{end}}
	<script type="text/javascript" src="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/wechat/frame/sui/js/SUI.js?"></script>
	<script type="text/javascript" src="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/wechat/frame/mui/js/mui.min.js"></script>
	<script src="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/wechat/js/zepto.min.js"></script>
	<script src="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/wechat/js/dropload.min.js"></script>
	<script type="text/javascript">
		var page = 2
		$('body').dropload({
			scrollArea : window,
			loadDownFn : function(me){
		        $.ajax({
		            type: 'GET',
		            url: window.location.href,
		            dataType: 'json',
		            data:{page:page},
		            success: function(data){
		            	console.log(data)
		              if(data){
		              		page += 1
		              		let fragment = createDocumentFragment()
		              		let block = document.createElement('div')
		              		let _html = ''
		                	for (let v of data) {
		                		_html = `<div class="news-wrap goto" href="/mobile/index/news_content?id=${v.id}">
		                				 	<div class="news-content">
									 		<div class="news-intr">
									 			<h2>${v.title}</h2>
									 			<span>${v.intr}</span>
									 		</div>
									 	`
		                		if (v.pathname.length > 0) {
		                			_html += `<div class="news-imgs">`
									for (let v of v.pathname) {
										_html += `<div>
									 				<img src="${v}">
									 			</div>`
									}									 								 			
									_html += `</div>`
		                		}
		                		_html += `<div class="news-addtime">
												<span>${v.addtime}</span>
												<span><i style="vertical-align: top;" class="iconfont">&#xe6e7;</i>${v.click}</span>
											</div>
										</div>
									</div>		
		                		`
		                	} 	
		                	block.innerHTML(_html)
		                	fragment.appendChild(block)
		                	document.body.appendChild('fragment')
		                	me.resetload();
		                }else{
		                    mui.toast("没有更多了！");
		                    $(".dropload-down").remove();
		                }
		            },
		            error: function(xhr, type){
		                mui.toast("网络慢，请重新刷新!");
		                me.resetload();
		            }
		        });
		    }
		})
	</script>
 </body>
 </html>